// //1, 添加事件监听的第一种方式：
// var btn = document.querySelector('button');
// btn.onclick = function(){
//     console.log('-----');
// }

// 2,在开始标签中添加onclick属性：
// 点击的回调函数，在js中定义该函数
// function click1(){
//     console.log   ('+++++++');
// }


// 3,通过addEventListtener方式添加监听函数；
function click2(){
    console.log('-=-=-=-=-=');
}
var btn = document.querySelector('button');
// event:事件; listen:听;
// para1：事件名称; para2:事件的回调函数名称
btn.addEventListener('click',click2);
         
function click3(){
    console.log('+-+-+-+--+');
}
btn.addEventListener('click',click3);

// onclick和addevenListener添加的事件互不影响；
// onclick只能添加一个事件回调函数
// add可以添加多个回调函数.

// 3)常用的事件：
// 鼠标事件
// 键盘事件
// 表单事件
// 生命周期事件
var div = document.querySelector('div');
// 单击事件：
div.onclick = function(event){
    console.log('click');
    console.log(event);
    // target:目标，事件发生在哪个标签上
    console.log(event.target);
    // event.clientX:距离浏览器可视区域左边界的距离
    // event.clientY:距离浏览器可视区域上边界的距离
    // event.screenX:距离显示屏左边界的距离
}
// 双击事件：
div.ondblclick = function(){
    console.log('dblclick');
}
// mouse：鼠标; down：下
// onmousedown:鼠标左键按下事件;
div.onmousedown = function(){
    console.log('onmousedown');
}
// onmouseup；鼠标左键松开事件
div.onmouseup = function(){
    console.log('onmouseup');
}
// enter:进入;onmouseenter；过边界时会调用
div.onmouseenter = function(){
    console.log('onmouseenter');
}
// leave：离开;onmouseleave: 
div.onmouseleave = function(){
    console.log('onmouseleave');
}
// out:外面
div.onmouseout = function(){
    console.log('onmouseout');
}
// over：在...上方
div.onmouseover = function(){
    console.log('onmouseover');
}
// move：移动;鼠标移动过程中不停的调用函数
div.onmousemove = function(){
    console.log('onmousemove');
}
// wheel:轮子;onwheel:滚轮事件
div.onwheel = function(){
    console.log('onwheel');
}
// 3.2键盘事件
// keydown:按下; keypress:压;onkeyup:松开;
window.onkeydown = function(){
    console.log('onkeydown');
}
window.onkeyup = function(){
    console.log('onkeyup');
    console.log('event');
    // 按键的字符
    console.log(event.key);
    // 按键的ascii码
    console.log(event.keyCode);
}
window.onkeypress = function(){
    console.log('onkeypress');
}

// 事件的回调函数，默认都有一个参数，就是当前的事件对象




// 在js中，this的指向是不确定的
// 1)在全局作用下，this指向window；
// 2）在事件的回调函数中，this代表触发事件的标签元素
// 3)在对象中，this指向当前对象

// 获取自定义属性data-*的两种方式：
//1) getAttribute('data-*');
//2) dataset.*